<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">仪表板</h1>
        <p class="text-gray-600 mt-1">管理和监控车辆信息</p>
      </div>
      <el-button type="primary" :icon="Plus" @click="showAddVehicleDialog = true">
        添加车辆
      </el-button>
    </div>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- 总车辆数 -->
      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <el-icon class="text-2xl text-blue-600"><Van /></el-icon>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">总车辆数</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.totalVehicles }}</p>
          </div>
        </div>
      </el-card>
      
      <!-- 空闲车辆 -->
      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <el-icon class="text-2xl text-green-600"><CircleCheck /></el-icon>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">空闲车辆</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.availableVehicles }}</p>
          </div>
        </div>
      </el-card>
      
      <!-- 使用中 -->
      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <el-icon class="text-2xl text-orange-600"><Clock /></el-icon>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">使用中</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.inUseVehicles }}</p>
          </div>
        </div>
      </el-card>
      
      <!-- 维护中 -->
      <el-card class="stat-card">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
              <el-icon class="text-2xl text-yellow-600"><Tools /></el-icon>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">维护中</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.maintenanceVehicles }}</p>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 快速操作和重置筛选 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 快速操作 -->
      <el-card>
        <template #header>
          <div class="flex items-center">
            <el-icon class="mr-2"><Lightning /></el-icon>
            <span class="font-medium">快速操作</span>
          </div>
        </template>
        <div class="space-y-3">
          <el-button class="w-full" @click="$router.push('/applications/new')">
            <el-icon class="mr-2"><Plus /></el-icon>
            新建申请
          </el-button>
          <el-button class="w-full" @click="$router.push('/vehicles')">
            <el-icon class="mr-2"><View /></el-icon>
            查看车辆
          </el-button>
          <el-button class="w-full" @click="$router.push('/drivers')">
            <el-icon class="mr-2"><User /></el-icon>
            管理驾驶员
          </el-button>
          <el-button class="w-full" @click="$router.push('/expenses')">
            <el-icon class="mr-2"><Money /></el-icon>
            费用统计
          </el-button>
        </div>
      </el-card>
      
      <!-- 重置筛选 -->
      <el-card>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <el-icon class="mr-2"><Filter /></el-icon>
              <span class="font-medium">筛选</span>
            </div>
            <el-button size="small" text @click="resetFilters">
              重置筛选
            </el-button>
          </div>
        </template>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">车辆状态</label>
            <el-select v-model="filters.status" placeholder="选择状态" class="w-full">
              <el-option label="全部" value="" />
              <el-option label="空闲" value="available" />
              <el-option label="使用中" value="in_use" />
              <el-option label="维护中" value="maintenance" />
            </el-select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">车辆品牌</label>
            <el-select v-model="filters.brand" placeholder="选择品牌" class="w-full">
              <el-option label="全部" value="" />
              <el-option label="丰田" value="丰田" />
              <el-option label="本田" value="本田" />
              <el-option label="大众" value="大众" />
            </el-select>
          </div>
        </div>
      </el-card>
      
      <!-- 最近活动 -->
      <el-card>
        <template #header>
          <div class="flex items-center">
            <el-icon class="mr-2"><Clock /></el-icon>
            <span class="font-medium">最近活动</span>
          </div>
        </template>
        <div class="space-y-3">
          <div v-for="activity in recentActivities" :key="activity.id" class="flex items-start space-x-3">
            <div class="flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
            <div class="flex-1 min-w-0">
              <p class="text-sm text-gray-900">{{ activity.description }}</p>
              <p class="text-xs text-gray-500">{{ activity.time }}</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 添加车辆对话框 -->
    <el-dialog v-model="showAddVehicleDialog" title="添加车辆" width="500px">
      <el-form :model="newVehicle" label-width="80px">
        <el-form-item label="车牌号">
          <el-input v-model="newVehicle.licensePlate" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="newVehicle.brand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="newVehicle.model" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="newVehicle.color" placeholder="请输入颜色" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddVehicleDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAddVehicle">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Plus,
  Van,
  CircleCheck,
  Clock,
  Tools,
  Lightning,
  View,
  User,
  Money,
  Filter
} from '@element-plus/icons-vue'

// 响应式数据
const showAddVehicleDialog = ref(false)

// 统计数据
const stats = reactive({
  totalVehicles: 3,
  availableVehicles: 3,
  inUseVehicles: 0,
  maintenanceVehicles: 0
})

// 筛选条件
const filters = reactive({
  status: '',
  brand: ''
})

// 新车辆表单
const newVehicle = reactive({
  licensePlate: '',
  brand: '',
  model: '',
  color: ''
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    description: '张师傅提交了京A12345的行程记录',
    time: '2分钟前'
  },
  {
    id: 2,
    description: '李员工申请使用车辆',
    time: '10分钟前'
  },
  {
    id: 3,
    description: '京B67890完成维护',
    time: '1小时前'
  },
  {
    id: 4,
    description: '新增驾驶员王师傅',
    time: '2小时前'
  }
])

// 重置筛选
const resetFilters = () => {
  filters.status = ''
  filters.brand = ''
  ElMessage.success('筛选条件已重置')
}

// 添加车辆
const handleAddVehicle = () => {
  if (!newVehicle.licensePlate || !newVehicle.brand || !newVehicle.model) {
    ElMessage.warning('请填写完整的车辆信息')
    return
  }
  
  // 模拟添加车辆
  stats.totalVehicles++
  stats.availableVehicles++
  
  // 重置表单
  Object.assign(newVehicle, {
    licensePlate: '',
    brand: '',
    model: '',
    color: ''
  })
  
  showAddVehicleDialog.value = false
  ElMessage.success('车辆添加成功')
}

// 组件挂载时加载数据
onMounted(() => {
  // 这里可以调用API加载实际数据
})
</script>

<style scoped>
.stat-card {
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}

.stat-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.el-card {
  border-radius: 8px;
}
</style>